{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
  <link rel="stylesheet" href="{% static 'css/profile_update.css' %}">
{% endblock %}

{% block content %}
<div class="container">
  <div class="card">
    <div class="card-header">
      <h3>编辑资料</h3>
    </div>

    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}

      <div class="card-body grid">
        <!-- 左侧头像区 -->
        <div class="avatar-section">
          <div class="avatar-preview">
              {% if user.avatar and user.avatar.url %}
                <img src="{{ user.avatar.url }}" alt="头像">
              {% else %}
                <img src="{% static 'images/default_avatar.png' %}" alt="默认头像">
              {% endif %}

          </div>
          <input type="file" name="avatar" accept="image/*">
        </div>

        <!-- 右侧表单区 -->
        <div class="form-section">
          <div class="form-group">
            <label>用户名</label>
            <input value="{{ user.username }}" disabled>
          </div>

          <div class="form-group">
            <label>昵称</label>
            <input name="nickname" value="{{ user.nickname|default:'' }}">
          </div>

          <div class="form-group">
            <label>邮箱</label>
            <input type="email" name="email" value="{{ user.email }}">
          </div>

          <div class="form-group">
            <label>简介</label>
            <textarea name="bio">{{ user.bio|default:'' }}</textarea>
          </div>
        </div>
      </div>

      <div class="actions">
        <button type="submit">保存</button>
        <a href="{% url 'users:profile' %}" class="cancel">取消</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}